// 第一模块 页面滚动显示隐藏侧边栏
(function () {
    // 需求：当页面滚动大于300像素的距离时候，就显示侧边栏，否则隐藏侧边栏
    // 1.需要用到页面滚动事件
    // 2.检测页面被卷去的头部，如果大于300，就让侧边栏显示
    // 3.显示和隐藏配合css过渡，利用opacity加渐变效果

    // 获取元素
    const elevator = document.querySelector('.xtx-elevator')

    window.addEventListener('scroll', function() {
        const n =document.documentElement.scrollTop
        // 被卷去的头部大于300
        // if(n >= 300) {
        //     elevator.style.opacity = 1
        // } else {
        //     elevator.style.opacity = 0
        // }
        elevator.style.opacity = n >= 300 ? 1 : 0
    })

    // 点击返回页面顶部
    const backTop = document.querySelector('#backTop')
    backTop.addEventListener('click', function () {
        // 可读写
        // document.documentElement.scrollTop = 0
        window.scrollTo(0, 0)
    })

})();

// 第二模块  电梯导航
(function () {
    // 需求：点击不同的模块，页面可以自动跳转不同的位置
    // 1.电梯模块单独放到自执行函数里面
    // 2.点击每个模块，页面自动滚动到对应模块，使用事件委托方法更加简单
    // 5.页面滚动到对应位置，电梯导航对应模块自动发生变化

    // 获取元素
    const elevator =document.querySelector('.xtx-elevator-list')

    // const newGoods =document.querySelector('.xtx_goods_new')
    // const popular =document.querySelector('.xtx_goods_popular')
    // const brand =document.querySelector('.xtx_goods_brand')
    // const topic =document.querySelector('.xtx_goods_topic')

    // 点击页面可以滑动
    elevator.addEventListener('click', function (e) {
        if(e.target.tagName === 'A' && e.target.dataset.name) {
            // 排他思想
            // 1.不能直接获取这个类，然后移除，这样会报错
            // 2.获取这个类，然后加个判断如果有这个类，就移除
            const old =  document.querySelector('.xtx-elevator-list .active');
            //  console.log(old);

            // 判断
            // 3.如果没有这个类，返回为 null，就不执行移除，就报错了
            if(old) old.classList.remove('active')

            // 点击小模块，当前添加active这个类
            e.target.classList.add('active')

            // 获得自定义属性
            // console.log(e.target.dataset.name);
            // 根据小盒子的自定义属性值 去选择 对应的大盒子
            console.log(document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop);
            // 获得对应大盒子的 offsetTop
            const top = document.querySelector(`.xtx_goods_${e.target.dataset.name}`).offsetTop
            // 让页面滚动到对应的位置
            document.documentElement.scrollTop = top
        }
    })

    // 3.页面滚动，可以根据大盒于选 小盒子 添加 active 类
    window.addEventListener('scroll', function () {
        // 3.1 先移除类
        // 先获取这个active的对象
        const old =  document.querySelector('.xtx-elevator-list .active');
        // 判断 如果原来有active 美的对象，就移除美，如果开始就没有对象，就不删除，所以不报错
        if(old) old.classList.remove('active')
        // 3.2判断页面当前滑动的位置，选择小盒子

        // 获取4个大盒子
        const newGoods =document.querySelector('.xtx_goods_new')
        const popular =document.querySelector('.xtx_goods_popular')
        const brand =document.querySelector('.xtx_goods_brand')
        const topic =document.querySelector('.xtx_goods_topic')
        const n = this.document.documentElement.scrollTop
        if(n >= newGoods.offsetTop && n < popular.offsetTop) {
            // 选择第一个小盒子
            document.querySelector('[data-name=new]').classList.add('active')
        } else if(n >= popular.offsetTop && n < brand.offsetTop) {
            document.querySelector('[data-name=popular]').classList.add('active')
        } else if(n >= brand.offsetTop && n < topic.offsetTop) {
            document.querySelector('[data-name=brand]').classList.add('active')
        } else if(n >= topic.offsetTop) {
            document.querySelector('[data-name=topic]').classList.add('active')
        }
    })


})();
